<template>
    <div class="main">
        <!-- 头部 -->
        <slot name="header"></slot>

        <!-- page-container 仅内容区域滚动 -->
        <div class="page-container">
             <slot name="content"></slot>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .main{       
        flex-grow: 1;         /* 横向占据剩余空间 */       
        overflow:hidden;    /* 横向无滚动 */  
        position: relative;   /* 不设置自身left、top也就不影响自身 */

        .page-container{
            position: absolute;
            top:60px;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y:auto;
        }
    }
</style>